

.#{$f-section-prefix} {
    display: flex;
    flex-direction: column;
    position: relative;
    padding: $f-section-inner-gutter;
    margin: 0;
    border-radius: $farris-split-section-border-radius;
    background: #fff;

    // Section——占剩余所有空间
    &.#{$f-section-prefix}-fill {
        flex-shrink: 1;
        flex-grow: 1;
        flex-basis: 0;
        overflow: hidden;

        .#{$f-section-prefix}-content {
            flex-shrink: 1;
            flex-grow: 1;
            flex-basis: 0;
            display: flex;
            flex-direction: column;
        }
    }

    &.#{$f-section-prefix}-content-fill {
        display: flex;
        flex-direction: column;

        .#{$f-section-prefix}-content {
            flex-shrink: 1;
            flex-grow: 1;
            flex-basis: 0;
            display: flex;
            flex-direction: column;
        }
    }

    //  Section——Header区域
    &-header {
        @include f-header-flex;
        padding: $f-section-header-inner-gutter;
        margin: $f-section-header-outer-gutter;

        .f-title {
            @extend .f-tmpl-for-title-withline;
        }

        .f-section-header .f-title::before .f-content {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .f-toolbar {
            color: $f-text-04;
            margin-left: auto;
        }

        .f-btn-collapse-expand {
            color: $f-section-header-toolbar-collapse-text;
        }

        .f-max-accordion {
            .f-icon-maximize {
                color: $f-text-03;
                font-size: 14px;
                cursor: pointer;
                margin-left: 0.5rem;
                vertical-align: middle;

                &:hover {
                    color: $f-theme-05;
                }

                &:active {
                    color: $f-theme-01;
                }
            }
        }
    }


    // 扩展
    &-extend {
        margin: 0 0 0.75rem;
    }

    // 收起
    &.f-state-collapse {
        >.#{$f-section-prefix} {
            &-extend {
                display: none;
            }
        }
    }
}

// 启用展开收起
.#{$f-section-prefix}-accordion {
    &.f-state-collapse {
        >.#{$f-section-prefix} {
            &-header {
                margin-bottom: 0;
            }

            &-content {
                height: 0;
                overflow: hidden;
                flex: 0 1 0;
            }
        }
    }
}

// 最大化
.#{$f-section-prefix}-maximize {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: $farris-loading-z-index - 30;
    background: $farris-split-section-bg;

    >.f-section-content {
        flex-shrink: 1;
        flex-grow: 1;
        flex-basis: 0;
        display: flex;
        flex-direction: column;
    }

    .f-grid-is-sub {
        flex-shrink: 1;
        flex-grow: 1;
        flex-basis: 0;
        height: auto;
    }
}

/**
  * 自定义収折
  * 表单下面分组的隐藏状态
  * 隐藏 ——默认
  * 部分显示 —— f-state-visible
  */
.#{$f-section-prefix}-form.#{$f-section-prefix}-custom-accordion {
    &.f-state-collapse {
        .f-form-layout {
            >*:not(.f-state-visible) {
                display: none;
            }
        }

        // 分组，一个输入控件
        .f-section-formgroup {

            // 只有在部分显示下，分组标题才可以隐藏
            &.f-state-visible {
                >*:not(.f-state-visible) {
                    display: none;
                }
            }
        }

        // 分组输入控件
        .f-section-formgroup-inputs {
            >*:not(.f-state-visible) {
                display: none;
            }

            &.f-state-visible-all>* {
                display: initial;
            }
        }
    }
}

// 增加强制带间距和强制不带间距
.#{$f-section-prefix}-hasgap {
    @include sectionHasGutter;
}

.#{$f-section-prefix}-nogap,
.f-section-nogutter {
    &::before {
        display: none !important;
    }
}

/**
  * Tab 内部存放
  **/
.#{$f-section-prefix}-tabs {
    padding: $f-section-tab-inner-gutter;
}

.#{$f-section-prefix}-treegrid {
    &.#{$f-section-prefix}-in-nav {
        flex-shrink: 1;
        flex-grow: 1;
        flex-basis: 0;

        >.f-section-content {
            flex-shrink: 1;
            flex-grow: 1;
            flex-basis: 0;
            display: flex;
            flex-direction: column;

            .f-componet-treetable {
                flex-shrink: 1;
                flex-grow: 1;
                flex-basis: 0;
            }
        }
    }
}

// 追加竖线颜色不一致
@each $f-type,
$f-ornamentDetail in $f-header-icon-bg {
    .f-section--header-#{$f-type} .f-section-header {
        .f-title {
            &::before {
                background: map-get($f-ornamentDetail, bg) !important;
            }
        }
    }
}

// 查询放到内容区，外间距去掉
.f-page-main {

    .f-section-like-query.f-section,
    .f-section-query.f-section {
        margin: 0;
    }
}

.f-title-noline {
    padding-left: 0;

    &::before {
        display: none;
    }
}